<template>
	<view class="register">
		<view class="form_div">
			<view class="form_label">
				<text class="required">*</text>账号:
			</view>
			<view class="form_input">
				<u--input placeholder="请输入账号" border="surround" v-model="formData.username"></u--input>
			</view>
		</view>
		<view class="form_div">
			<view class="form_label">
				<text class="required">*</text>密码:
			</view>
			<view class="form_input">
				<u--input placeholder="请输入密码" border="surround" v-model="formData.password"></u--input>
			</view>
		</view>
		<view class="form_div top">
			<u-button type="primary" text="注册" @click="register"></u-button>
			<u-button text="取消" @click="cancel"></u-button>
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {register} from '@/api/contents/login/login.js'
	import md5 from 'md5-node'
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				}
			};
		},
		methods:{
			register(){
				if(this.formData.username && this.formData.password ){
					const sendFormData = {
					      username: this.formData.username,
					      password: md5(this.formData.password),
					};
					register(this.formData).then(res=>{
						if(res.code===0){
							this.$refs.uToast.show({
								message: res.message,
								complete() {
									uni.redirectTo({
										url:'/'
									})
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.message
							})
						}
					})
				}else{
					
						uni.showToast({
							icon:'none',
							title:'账号或密码不能为空！'
						})
				}
				
			},
			cancel(){
				uni.redirectTo({
					url:'/'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register {
		.form_div {
			padding: 0 20upx;

			.form_label {
				height: 60upx;
				line-height: 60upx;
				color: #8f9ca2;
				font-size: 28upx;
			}

		}

		.top {
			margin-top: 200upx;
			height: 180upx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.required {
			color: #F56C6C;
		}
	}
</style>
